<template>
  <div class="boxs">
    <div class="f1">
      <ul>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/kuajing/组172.png" alt="" />
            <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
          </div>
          <span style="color: #627dca">确认账款信息</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/kuajing/组174.png" alt="" />
            <img class="icon2" src="@/assets/kuajing/组175.png" alt="" />
          </div>
          <span style="color: #627dca">上传申请材料</span>
        </li>
        <li>
          <div class="icon">
            <img class="icon1" src="@/assets/kuajing/组177.png" alt="" />
          </div>
          <span>绑定银行账户</span>
        </li>
      </ul>
    </div>
    <div class="f2">
      <div class="notNull">
        <!-- 合同信息表格数据 -->
        <!-- 1.新增按钮 -->
        <div class="newly">
          <h4>合同信息</h4>
          <h5 @click="newlyContractBtn()">新增</h5>
        </div>
        <!-- 空状态 -->
        <div v-if="!contractData" class="null">
          <img src="@/assets/shangpiao/暂无记录.png" alt="" />
          <p>暂无数据记录</p>
        </div>
        <!-- 2.表格 -->
        <el-table
          v-else
          :data="contractData"
          border
          highlight-current-row
          stripe
          type="index"
          style="width: 100%"
          :header-cell-style="{
            background: '#EBEDED',
            color: '#4D4D4D',
          }"
        >
          <el-table-column
            prop="number"
            label="序号"
            min-width="2%"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="conNo"
            label="合同编号"
            min-width="6%"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="conName"
            label="合同名称"
            min-width="6%"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="conAmount"
            label="合同金额 (元) "
            min-width="6%"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.conAmount | getArea
            }}</template>
          </el-table-column>
          <el-table-column
            prop="currency"
            label="币种"
            min-width="4%"
            align="center"
          >
          </el-table-column>

          <el-table-column label="合同详情" min-width="4%" align="center">
            <template slot-scope="scope">
              <span
                class="span"
                @click="checkContract(scope.$index, contractData)"
                type="text"
                size="small"
              >
                查看
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="4%" align="center">
            <template slot-scope="scope">
              <span
                class="span"
                @click="updateContract(scope.$index, contractData)"
                type="text"
                size="small"
              >
                编辑
              </span>
              <span
                class="span del"
                @click="delContract(scope.$index, contractData)"
                type="text"
                size="small"
              >
                删除
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 3.说明文字 -->
        <div class="explain">
          <div class="explain-left">
            <span>说明：</span>
          </div>
          <div class="explain-right">
            <p>
              （1）请逐一填写合同信息，如为框架合同，合同金额处填写融资发票合计金额，合同总金额应大于等于发票金额
              ；
            </p>
            <p>
              （2）请确保合同印章清晰，图像清晰完整，合同附件与附件清单打包后一并上传，并加盖骑缝章；
            </p>
            <p>
              （3）框架合同，请将与融资发票对应的订单或发货单等文件与合同打包后一并上传
              ；
            </p>
            <p>
              （4）因更名造成企业名称与盖章不一致时，请在其他文件资料处上传工商局出具的《企业名称变更通知书》。
            </p>
          </div>
        </div>
        <!-- 申请文件表格数据 -->
        <!-- 1.新增按钮 -->
        <div class="newly">
          <h4>申请文件</h4>
        </div>
        <!-- 2.表格 -->
        <el-table
          :data="applyData"
          border
          highlight-current-row
          stripe
          type="index"
          style="width: 100%"
          :header-cell-style="{
            background: '#EBEDED',
            color: '#4D4D4D',
          }"
        >
          <el-table-column
            prop="number"
            label="序号"
            min-width="2%"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="文件名称"
            min-width="15%"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="yszkje"
            label="文件状态"
            min-width="8%"
            align="center"
          >
          </el-table-column>

          <el-table-column label="操作" min-width="4%" align="center">
            <template slot-scope="scope">
              <span
                class="span"
                @click="applyFileUpload(scope.$index, applyData)"
                type="text"
                size="small"
              >
                上传
              </span>
              <span
                class="span"
                v-bind:class="{
                  disable: applyData[scope.$index].yszkje != '已上传',
                }"
                @click="checkApply(scope.$index, applyData)"
                type="text"
                size="small"
              >
                查看
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 其他文件表格数据 -->
        <!-- 1.新增按钮 -->
        <div class="newly">
          <h4>其他文件</h4>
          <h5 @click="newlyOtherBtn()">新增</h5>
        </div>
        <!-- 空状态 -->
        <div v-if="!elseData" class="null">
          <img src="@/assets/shangpiao/暂无记录.png" alt="" />
          <p>暂无数据记录</p>
        </div>
        <!-- 2.表格 -->
        <el-table
          v-else
          :data="elseData"
          border
          highlight-current-row
          stripe
          type="index"
          style="width: 100%"
          :header-cell-style="{
            background: '#EBEDED',
            color: '#4D4D4D',
          }"
        >
          <el-table-column
            prop="number"
            label="序号"
            min-width="2%"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="文件名称"
            min-width="19%"
            align="center"
          >
          </el-table-column>

          <el-table-column label="操作" min-width="4%" align="center">
            <template slot-scope="scope">
              <span
                class="span"
                @click="compileOtherFile(scope.$index, elseData)"
                type="text"
                size="small"
              >
                编辑
              </span>
              <span
                class="span del"
                @click="otherFileDel(scope.$index, elseData)"
                type="text"
                size="small"
              >
                删除
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 上一步/保存/提交 按钮 -->
        <div class="submit">
          <div class="btn btn1" @click="goLast()">上一步</div>
          <div
            class="btn btn3"
            v-bind:class="{ active: btn }"
            @click="submit()"
          >
            {{ submitMessage }}
          </div>
        </div>
      </div>
    </div>
    <!-- 弹框部分 -->
    <!-- 新增发票弹框开始 -->
    <el-dialog
      :closeOnClickModal="false"
      title="新增发票"
      :visible.sync="newlyInvoiceVisible"
      :before-close="handleClose"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center">
        <ul>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="140px"
            >
              <el-form-item prop="invCode" label="发票代码">
                <el-input
                  v-model="formInvoice.invCode"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="140px"
            >
              <el-form-item label="发票编号" prop="invNo">
                <el-input v-model="formInvoice.invNo" placeholder=""></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="140px"
            >
              <el-form-item label="发票金额 (元) " prop="invAmount">
                <el-input
                  v-model="formInvoice.invAmount"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="140px"
            >
              <el-form-item label="币种" prop="currency">
                <el-input
                  disabled
                  v-model="formInvoice.currency"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="140px"
            >
              <el-form-item label="开票日期" prop="invDate">
                <el-date-picker
                  v-model="formInvoice.invDate"
                  type="date"
                  placeholder=""
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="140px"
            >
              <el-form-item label="合同编码" prop="contractno">
                <el-input
                  v-model="formInvoice.contractno"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form label-width="140px">
              <el-form-item label="发票文件上传">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :file-list="fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                  :on-remove="handleRemove"
                  multiple="multiple"
                >
                  <span
                    class="file"
                    slot="trigger"
                    size="small"
                    type="primary"
                    @click="delFile"
                    >文件上传</span
                  >
                </el-upload>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="callOffInvoice()">
          取 消
        </button>
        <button
          class="dialog-footer-bnt btn2"
          @click="updateCoopeorgInvoice('formInvoiceRef')"
        >
          确 定
        </button>
      </div>
    </el-dialog>
    <!-- 新增发票弹框结束 -->
    <!-- 新增合同弹框开始 -->
    <el-dialog
      :closeOnClickModal="false"
      title="新增合同"
      :visible.sync="newlyContractVisible"
      :before-close="handleClose"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center">
        <ul>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="140px"
            >
              <el-form-item label="合同编号" prop="conNo">
                <el-input
                  v-model="formContract.conNo"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="140px"
            >
              <el-form-item label="合同名称" prop="conName">
                <el-input
                  v-model="formContract.conName"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="140px"
            >
              <el-form-item label="合同金额 (元) " prop="conAmount">
                <el-input
                  @blur="costChangeConAmount"
                  @focus="
                    () => {
                      this.formContract.conAmount = remoney(
                        this.formContract.conAmount
                      );
                    }
                  "
                  v-model="formContract.conAmount"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="140px"
            >
              <el-form-item label="币种" prop="currency">
                <el-input
                  disabled
                  v-model="formContract.currency"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form label-width="140px">
              <el-form-item label="合同文件上传">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :file-list="fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                  :on-remove="handleRemove"
                  :before-upload="beforeAvatarUpload"
                  multiple="multiple"
                >
                  <span
                    class="file"
                    slot="trigger"
                    size="small"
                    type="primary"
                    @click="delFile"
                    >文件上传</span
                  >
                </el-upload>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="callOffContract()">
          取 消
        </button>
        <button
          class="dialog-footer-bnt btn2"
          @click="updateCoopeorgContract()"
        >
          确 定
        </button>
      </div>
    </el-dialog>
    <!-- 新增合同弹框结束 -->
    <!-- 上传申请文件弹框开始 -->
    <el-dialog
      :closeOnClickModal="false"
      title="上传申请文件"
      :visible.sync="applyFileVisible"
      :before-close="handleClose"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center">
        <ul style="margin-left: -0.2604rem">
          <li>
            <el-form label-width="140px">
              <el-form-item label="申请文件上传">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :file-list="fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                  :on-remove="handleRemove"
                  multiple="multiple"
                >
                  <span
                    class="file"
                    slot="trigger"
                    size="small"
                    type="primary"
                    @click="delFile"
                    >文件上传</span
                  >
                </el-upload>
                <span class="file"></span>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="callOffApply()">
          取 消
        </button>
        <button class="dialog-footer-bnt btn2" @click="applyFile()">
          确 定
        </button>
      </div>
    </el-dialog>
    <!-- 上传申请文件弹框结束 -->
    <!-- 新增其他文件弹框开始 -->
    <el-dialog
      :closeOnClickModal="false"
      title="上传其他文件"
      :visible.sync="otherVisible"
      :before-close="handleClose"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center">
        <ul>
          <li>
            <el-form
              ref="form"
              :model="form"
              :rules="formotherRules"
              label-width="140px"
            >
              <el-form-item label="文件名称" prop="ticketname">
                <el-input
                  v-model="form.ticketname"
                  placeholder="请输入文件名称"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form label-width="140px">
              <el-form-item label="其他文件上传">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :file-list="fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                  :on-remove="handleRemove"
                  multiple="multiple"
                >
                  <span
                    class="file"
                    slot="trigger"
                    size="small"
                    type="primary"
                    @click="delFile"
                    >文件上传</span
                  >
                </el-upload>
                <span class="file"></span>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="callOffOther()">
          取 消
        </button>
        <button class="dialog-footer-bnt btn2" @click="updateCoopeoOther()">
          确 定
        </button>
      </div>
    </el-dialog>
    <!-- 新增其他文件弹框结束 -->
    <!-- 编辑弹框部分 -->
    <!-- 编辑发票弹框开始 -->
    <el-dialog
      :closeOnClickModal="false"
      title="编辑发票信息"
      :visible.sync="updateInvoiceVisible"
      :before-close="handleClose"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center">
        <ul>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="140px"
            >
              <el-form-item prop="invCode" label="发票代码">
                <el-input
                  v-model="formInvoice.invCode"
                  placeholder="请输入发票代码"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="140px"
            >
              <el-form-item label="发票编号" prop="invCode">
                <el-input
                  v-model="formInvoice.invNo"
                  placeholder="请输入发票编号"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="140px"
            >
              <el-form-item label="发票金额 (元) " prop="invAmount">
                <el-input
                  v-model="formInvoice.invAmount"
                  placeholder="请输入发票金额"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="140px"
            >
              <el-form-item label="币种" prop="currency">
                <el-input
                  disabled
                  v-model="formInvoice.currency"
                  placeholder="请输入币种"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="140px"
            >
              <el-form-item label="开票日期" prop="invDate">
                <el-date-picker
                  v-model="formInvoice.invDate"
                  type="date"
                  placeholder="请输入开票日期"
                  :clearable="false"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formInvoiceRef"
              :model="formInvoice"
              :rules="formInvoiceRules"
              label-width="140px"
            >
              <el-form-item label="合同编码" prop="contractno">
                <el-input
                  v-model="formInvoice.contractno"
                  placeholder="请输入合同编码"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="callOffInvoice()">
          取 消
        </button>
        <button class="dialog-footer-bnt btn2" @click="updateInvoiceData()">
          确 定
        </button>
      </div>
    </el-dialog>
    <!-- 编辑发票弹框结束 -->
    <!-- 编辑合同弹框开始 -->
    <el-dialog
      :closeOnClickModal="false"
      title="编辑合同信息"
      :visible.sync="updateContractVisible"
      :before-close="handleClose"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center">
        <ul>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="140px"
            >
              <el-form-item label="合同编号" prop="conNo">
                <el-input
                  v-model="formContract.conNo"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="140px"
            >
              <el-form-item label="合同名称" prop="conName">
                <el-input
                  v-model="formContract.conName"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="140px"
            >
              <el-form-item label="合同金额 (元) " prop="conAmount">
                <el-input
                  @blur="costChangeConAmount"
                  @focus="
                    () => {
                      this.formContract.conAmount = remoney(
                        this.formContract.conAmount
                      );
                    }
                  "
                  @input="limitInput($event, 'conAmount')"
                  v-model="formContract.conAmount"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form
              ref="formContractRef"
              :model="formContract"
              :rules="formContractRules"
              label-width="140px"
            >
              <el-form-item label="币种" prop="currency">
                <el-input
                  disabled
                  v-model="formContract.currency"
                  placeholder=""
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form label-width="140px">
              <el-form-item label="重新上传文件">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :file-list="fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                  :on-remove="handleRemove"
                  :before-upload="beforeAvatarUpload"
                  multiple="multiple"
                >
                  <span
                    class="file"
                    slot="trigger"
                    size="small"
                    type="primary"
                    @click="delFile"
                    >文件上传</span
                  >
                </el-upload>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="callOffContract()">
          取 消
        </button>
        <button class="dialog-footer-bnt btn2" @click="updateCoopeorgData()">
          确 定
        </button>
      </div>
    </el-dialog>
    <!-- 编辑合同弹框结束 -->
    <!--编辑其他文件弹框开始 -->
    <el-dialog
      :closeOnClickModal="false"
      title="编辑其他文件"
      :visible.sync="updateoOtherVisible"
      :before-close="handleClose"
      width=""
    >
      <!-- 内容区域 -->
      <div class="dialog-center">
        <ul>
          <li>
            <el-form
              ref="form"
              :model="form"
              :rules="formotherRules"
              label-width="140px"
            >
              <el-form-item label="文件名称" prop="ticketname">
                <el-input
                  v-model="form.ticketname"
                  placeholder="请输入文件名称"
                ></el-input>
              </el-form-item>
            </el-form>
          </li>
          <li>
            <el-form label-width="140px">
              <el-form-item label="重新上传文件">
                <el-upload
                  class="upload"
                  ref="upload"
                  action="string"
                  :file-list="fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handleChange"
                  :on-remove="handleRemove"
                  multiple="multiple"
                >
                  <span
                    class="file"
                    slot="trigger"
                    size="small"
                    type="primary"
                    @click="delFile"
                    >重新上传</span
                  >
                </el-upload>
                <span class="file"></span>
              </el-form-item>
            </el-form>
          </li>
        </ul>
      </div>
      <!-- 按钮区域 -->
      <!--  -->
      <!-- -->
      <div slot="footer" class="dialog-footer">
        <button class="dialog-footer-bnt btn1" @click="callOffOther()">
          取 消
        </button>
        <button class="dialog-footer-bnt btn2" @click="updateOtherFile()">
          确 定
        </button>
      </div>
    </el-dialog>
    <!-- 新增其他文件弹框结束 -->
  </div>
</template>

<script>
import {
  getInvoice,
  delInvoice,
  updateInvoice,
  getContract,
  delContract,
  updateContract,
  busnessSubmit,
  getFilePath,
  filedel,
  base,
} from "@/utils";
import { mapState } from "vuex";
export default {
  data() {
    return {
      submitMessage: "下一步",
      base: "", // 服务器跟地址
      otherFileList: [],
      radio: false, //企业授权服务状态变量
      btn: true, //提交按钮是否可用状态变量
      applyId: "", //地址栏中Id
      procedureid: "", //产品Id
      applyName: "", //申请文件表格中文件名称
      // yszkjes: "未上传", //申请文件表格字段文件状态
      newlyInvoiceVisible: false, // 新增发票弹框状态变量
      updateInvoiceVisible: false, //编辑发票弹框状态变量
      newlyContractVisible: false, //新增合同弹框状态变量
      updateContractVisible: false, //编辑合同弹框状态变量
      applyFileVisible: false, // 上传申请文件弹框状态变量
      otherVisible: false, //新增其他文件弹框状态变量
      updateoOtherVisible: false, //编辑其他文件弹框状态变量
      Serialno: "", //其他文件唯一ID
      fileList: [],
      // 不支持多选
      multiple: false,
      formData: "",
      //发票信息表单数据对象
      formInvoice: {
        invCode: "", //发票代码
        invNo: "", //发票编号
        invAmount: "", //金额
        currency: "人民币", //币种
        invDate: "", //开票日期
        contractno: "", //合同编码
        id: "", //每个列表的唯一id
      },
      //合同信息表单数据对象
      formContract: {
        conNo: "", //合同编号
        conName: "", //合同名称
        conAmount: "", //合同金额
        currency: "人民币", //币种
        id: "", //id
      },
      //合同信息表单数据对象
      formContracts: {
        conAmount: "",
      },
      form: {
        ticketname: "",
        ticketNumber: "",
        ticketaddr: "",
        tickettel: "",
      },
      // 发票表格数据
      invoiceData: null,
      // 合同表格数据
      contractData: null,
      // 申请文件表格数据
      applyData: [
        {
          number: 1,
          name: "当期年度报表",
          yszkje: "未上传",
        },
        {
          number: 2,
          name: "上期年度报表",
          yszkje: "未上传",
        },
      ],
      // 其他文件表格数据
      elseData: null,
      // 表单验证
      // 发票弹框表单验证
      formInvoiceRules: {
        invCode: [{ required: true, message: " ", trigger: "blur" }],
        invNo: [{ required: true, message: " ", trigger: "blur" }],
        invAmount: [{ required: true, message: " ", trigger: "blur" }],
        currency: [{ required: true, message: " ", trigger: "blur" }],
        invDate: [{ required: true, message: " ", trigger: "change" }],
        contractno: [{ required: true, message: " ", trigger: "blur" }],
      },
      // 合同弹框表单验证
      formContractRules: {
        conNo: [{ required: true, message: " ", trigger: "blur" }],
        conName: [{ required: true, message: " ", trigger: "blur" }],
        conAmount: [{ required: true, message: " ", trigger: "blur" }],
        currency: [{ required: true, message: " ", trigger: "blur" }],
      },
      // 其他文件弹框表单验证
      formotherRules: {
        ticketname: [{ required: true, message: " ", trigger: "blur" }],
      },
    };
  },
  // 计算属性
  computed: {
    ...mapState(["shangLianApplyParameter"]),
  },
  // 生命周期
  mounted() {
    // 获取地址栏中id
    this.applyId = localStorage.getItem("applyid");
    this.procedureid = localStorage.getItem("id");
    this.getInvoice();
    this.getContract();
    this.getFilePath();
    this.base = base;
  },
  // 监听器
  watch: {},
  // 过滤器
  filters: {
    getArea: function (value) {
      value = value.toFixed(2);
      // value = parseInt(value);
      if (!value) return "0.00";
      // 将数值截取，保留两位小数

      // 获取整数部分
      const intPart = Math.trunc(value);
      // 整数部分处理，增加,
      const intPartFormat = intPart
        .toString()
        .replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
      // 预定义小数部分
      let floatPart = ".00";
      // 将数值截取为小数部分和整数部分
      const valueArray = value.toString().split(".");
      if (valueArray.length === 2) {
        // 有小数部分
        floatPart = valueArray[1].toString(); // 取得小数部分
        return intPartFormat + "." + floatPart;
      }
      return intPartFormat + floatPart;
    },
  },
  methods: {
    // 上一步
    goLast() {
      this.$router.go(-1);
    },
    // 鼠标移开合同信息金额变化
    costChangeConAmount(e) {
      this.formContracts.conAmount = this.formContract.conAmount;
      //获取输入的数据，若不写这行，数据可能输不进去
      this.formContract.conAmount = e.target.value;
      //将用户输入的数据，自动转换为带千分符的
      this.formContract.conAmount = this.fmoney(this.formContract.conAmount);
    },

    // 保存
    save() {
      this.$Message.success("保存成功");
    },
    // 提交
    async submit() {
      if (
        (this.contractData != null) &
        (this.applyData[0].yszkje != "未上传" &&
          this.applyData[1].yszkje != "未上传")
      ) {
        this.$router.push(`/blrzApplication4`);
        return;
      }
      this.$Message.error("请补充申请信息");
    },
    // 新增发票
    // 点击新增弹出输入框
    newlyInvoiceBtn() {
      this.newlyInvoiceVisible = true;
    },
    // 点击取消弹框
    callOffInvoice() {
      this.$Message.warning("取消编辑");
      this.newlyInvoiceVisible = false;
      this.updateInvoiceVisible = false;
      this.formInvoice.invCode = "";
      this.formInvoice.invNo = "";
      this.formInvoice.invAmount = "";
      this.formInvoice.invDate = "";
      this.formInvoice.contractno = "";
      this.fileList = [];
    },
    // 点击弹框确认按钮,新增发票
    async updateCoopeorgInvoice() {
      if (
        (this.formInvoice.invCode != "") &
        (this.formInvoice.invNo != "") &
        (this.formInvoice.invAmount != "") &
        (this.formInvoice.currency != "") &
        (this.formInvoice.invDate != "") &
        (this.formInvoice.contractno != "") &
        (this.fileList.length != 0)
      ) {
        let token = sessionStorage.getItem("token");
        let formData = new FormData();
        formData.append("file", this.fileList[0].raw);
        let { invCode, contractno, currency, invAmount, invDate, invNo } =
          this.formInvoice;

        let url =
          this.base +
          `/api/Invoice/addInvoice?objecttype=invoice&newfilename=${this.formInvoice.invCode}&applyid=${this.applyId}&currency=${currency}&invAmount=${invAmount}&invDate=${invDate}&invCode=${invCode}&contractno=${contractno}&invNo=${invNo}`;
        this.axios
          .post(url, formData, {
            headers: { "Content-Type": "multipart/form-data", "x-auth": token },
          })
          .then((res) => {
            if (res.data.msg == "ok") {
              this.$Message.success("新增上传成功");
              this.formInvoice.invCode = "";
              this.formInvoice.invNo = "";
              this.formInvoice.invAmount = "";
              this.formInvoice.invDate = "";
              this.formInvoice.contractno = "";
              this.fileList = [];
              this.getInvoice();
              this.newlyInvoiceVisible = false;
            } else {
              this.$Message.error("文件上传失败，请检查文件信息");
            }
          });
      } else {
        this.$Message.error("请填写/上传发票信息/文件");
      }
    },
    // 点击删除按钮
    async delInvoice(index, row) {
      let id = row[index].id;
      let data = await delInvoice(id);
      if (data.msg == "ok") {
        this.$Message.success("删除成功");
        this.getInvoice();
      }
      return data;
    },
    // 点击编辑按钮弹框
    updateInvoice(index, row) {
      this.updateInvoiceVisible = true;
      // 将数据回显在输入框中
      this.formInvoice.invCode = row[index].invCode;
      this.formInvoice.invNo = row[index].invNo;
      this.formInvoice.invAmount = row[index].invAmount;
      this.formInvoice.invDate = row[index].invDate;
      this.formInvoice.contractno = row[index].contractno;
      this.formInvoice.id = row[index].id;
    },
    // 点击编辑弹框确认按钮
    async updateInvoiceData() {
      if (
        (this.formInvoice.invCode != "") &
        (this.formInvoice.invNo != "") &
        (this.formInvoice.invAmount != "") &
        (this.formInvoice.currency != "") &
        (this.formInvoice.invDate != "") &
        (this.formInvoice.contractno != "")
      ) {
        let data = await updateInvoice(this.formInvoice);
        if (data.msg == "ok") {
          this.updateInvoiceVisible = false;
          this.$Message.success("新增/修改成功");
          this.getInvoice();
          this.formInvoice.invCode = "";
          this.formInvoice.invNo = "";
          this.formInvoice.invAmount = "";
          this.formInvoice.invDate = "";
          this.formInvoice.contractno = "";
        } else {
          this.$Message.error("修改失败请检查数据");
        }
      } else {
        this.$Message.error("请填写发票信息");
      }
    },
    // 1.调用接口，获取发票信息列表
    async getInvoice() {
      let { data } = await getInvoice(this.applyId);
      this.invoiceData = data;
      for (let i = 0; i < data.length; i++) {
        this.invoiceData[i].number = i + 1;
      }
      if (data.length == 0) {
        this.invoiceData = null;
      }
      return data;
    },

    // 新增合同
    newlyContractBtn() {
      this.newlyContractVisible = true;
    },
    // 点击取消弹框
    callOffContract() {
      this.$Message.warning("取消编辑");
      this.newlyContractVisible = false;
      this.updateContractVisible = false;
      this.formContract.conNo = "";
      this.formContract.conName = "";
      this.formContract.conAmount = "";
      this.fileList = [];
    },
    // 点击弹框确认按钮，新增合同信息
    async updateCoopeorgContract() {
      if (
        (this.formContract.conNo != "") &
        (this.formContract.conName != "") &
        (this.formContract.conAmount != "") &
        (this.formContract.currency != "") &
        (this.fileList.length != 0)
      ) {
        let { conNo, conName, currency } = this.formContract;
        let { conAmount } = this.formContracts;
        let token = sessionStorage.getItem("token");
        let formData = new FormData();
        formData.append("file", this.fileList[0].raw);
        let url =
          this.base +
          `/api/TblContract/addContract?objecttype=contract&newfilename=${conName}&applyid=${this.applyId}&conNo=${conNo}&conName=${conName}&conAmount=${conAmount}&currency=${currency}`;
        this.axios
          .post(url, formData, {
            headers: { "Content-Type": "multipart/form-data", "x-auth": token },
          })
          .then((res) => {
            if (res.data.msg == "ok") {
              this.newlyContractVisible = false;
              this.$Message.success("新增/修改成功");
              this.getContract();
              this.formContract.conNo = "";
              this.formContract.conName = "";
              this.formContract.conAmount = "";
              this.fileList = [];
            } else {
              this.$Message.error("文件上传失败，请检查文件信息");
            }
          })
          .catch((err) => {
            this.$Message.error("上传失败");
            this.fileList = [];
          });
      } else {
        this.$Message.error("请填写/上传合同信息/文件");
      }
    },
    // 编辑某项合同信息
    updateContract(index, row) {
      let data = row[index];
      this.updateContractVisible = true;
      // 回显数据
      this.formContract.conNo = data.conNo;
      this.formContract.conName = data.conName;
      this.formContract.currency = data.currency;
      this.formContract.id = data.id;
      // 合同金额
      if (data.conAmount) {
        if (parseFloat(Number(data.conAmount), 10) != Number(data.conAmount)) {
          this.formContract.conAmount = Number(data.conAmount).toLocaleString();
        } else {
          this.formContract.conAmount =
            Number(data.conAmount).toLocaleString() + ".00";
        }
      }
      this.formContracts.conAmount = data.conAmount;
      // ;
    },
    // 点击编辑弹框确认按钮
    async updateCoopeorgData() {
      let { conNo, conName, currency } = this.formContract;
      let { conAmount } = this.formContracts;
      let parameter = {
        conNo: this.formContract.conNo,
        conName: this.formContract.conName,
        currency: this.formContract.currency,
        conAmount: this.formContracts.conAmount,
        id: this.formContract.id,
      };
      if (
        conNo.trim() == "" ||
        conName.trim() == "" ||
        currency.trim() == "" ||
        conAmount == ""
      )
        return this.$Message.error("请填写发票信息");
      let token = sessionStorage.getItem("token");
      if (this.fileList.length != 0) {
        let formData = new FormData();
        formData.append("file", this.fileList[0].raw);
        let url =
          this.base +
          `/api/TblContract/updateContract?id=${this.formContract.id}&currency=${currency}&conName=${conName}&conAmount=${conAmount}&conNo=${conNo}`;
        this.axios
          .post(url, formData, {
            headers: { "Content-Type": "multipart/form-data", "x-auth": token },
          })
          .then((res) => {
            if (res.data.code == 100) {
              this.$Message.success("文件上传成功");
              this.updateContractVisible = false;
              this.getContract();
              this.formContract.conNo = "";
              this.formContract.conName = "";
              this.formContract.conAmount = "";
              this.fileList = [];
            }
          })
          .catch((err) => {
            this.$Message.error("上传失败");
            this.fileList = [];
          });
      } else {
        let data = await updateContract(parameter);
        if (data.msg == "ok") {
          this.updateContractVisible = false;
          this.$Message.success("修改成功");
          this.getContract();
          this.formContract.conNo = "";
          this.formContract.conName = "";
          this.formContract.conAmount = "";
          this.fileList = [];
        }
      }
    },
    // 删除某项合同信息
    async delContract(index, row) {
      let data = await delContract(row[index].id);
      if (data.msg == "ok") {
        this.$Message.success("删除成功");
        this.getContract();
      }
    },

    // 合同 获取合同信息列表
    async getContract() {
      let { data } = await getContract(this.applyId);
      this.contractData = data;
      for (let i = 0; i < data.length; i++) {
        this.contractData[i].number = i + 1;
      }
      if (data.length == 0) {
        this.contractData = null;
      }
      return data;
    },
    // 上传申请文件信息
    applyFileUpload(index, row) {
      this.applyFileVisible = true;
      this.applyName = row[index].name;
    },
    // 点击弹框取消按钮
    callOffApply() {
      this.applyFileVisible = false;
      this.$Message.warning("取消上传");
      this.fileList = [];
    },
    // 点击弹框确认按钮
    applyFile() {
      if (this.applyName.trim() != 0 && this.fileList.length != 0) {
        this.applyFileVisible = false;
        let formData = new FormData();
        formData.append("file", this.fileList[0].raw);
        let url =
          this.base +
          `/api/filess/fileadd?objecttype=apply&id=${this.applyId}&newfilename=${this.applyName}`;
        this.axios
          .post(url, formData, {
            "Content-Type": "multipart/form-data",
          })
          .then((res) => {
            if (res.data.code == 100) {
              this.getFilePath();
              this.$Message.success("文件上传成功");
              this.form.ticketname = "";
              this.fileList = [];
            }
          })
          .catch((err) => {
            this.$Message.error("上传失败");
            this.fileList = [];
          });
      } else {
        this.$Message.error("请补充内容");
      }
    },

    // 新增其他文件
    newlyOtherBtn() {
      this.otherVisible = true;
    },
    // 点击取消弹框
    callOffOther() {
      this.$Message.warning("取消编辑");
      this.otherVisible = false;
      this.updateoOtherVisible = false;
    },
    //点击上传文件触发的额外事件,清空fileList
    delFile() {
      this.fileList = [];
    },
    handleChange(file, fileList) {
      this.fileList = fileList;
    },
    //自定义上传文件
    uploadFile(file) {
      this.formData.append("file", file.file);
    },
    //删除文件
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },

    // 点击上传其他文件弹框确认按钮
    async updateCoopeoOther() {
      if (this.form.ticketname.trim() != 0 && this.fileList.length != 0) {
        this.otherVisible = false;
        let formData = new FormData();
        formData.append("file", this.fileList[0].raw);
        let url =
          this.base +
          `/api/filess/fileadd?objecttype=other&id=${this.applyId}&newfilename=${this.form.ticketname}`;
        this.axios
          .post(url, formData, {
            "Content-Type": "multipart/form-data",
          })
          .then((res) => {
            if (res.data.msg == "ok") {
              this.getFilePath();
              this.$Message.success("文件上传成功");
              this.form.ticketname = "";
              this.otherFileList.push(this.fileList);
              this.fileList = [];
            }
          })
          .catch((err) => {
            this.$Message.error("文件上传失败，请检查文件信息");
            this.form.ticketname = "";
            this.fileList = [];
          });
      } else {
        this.$Message.error("请补充内容");
      }
    },
    // 获取文件信息
    async getFilePath() {
      let { data } = await getFilePath(this.applyId);
      let other = [];
      for (let i = 0; i < data.length; i++) {
        if (data[i].type == "other") {
          other.push(data[i]);
        } else if (data[i].type == "apply") {
          if (data[i].name == "当期年度报表") {
            this.applyData[0].yszkje = "已上传";
          }
          if (data[i].name == "上期年度报表") {
            this.applyData[1].yszkje = "已上传";
          }
        }
      }
      if (other.length == 0) {
        this.elseData = null;
      } else {
        this.elseData = other;
        for (let i = 0; i < this.elseData.length; i++) {
          this.elseData[i].number = i + 1;
        }
      }
      return data;
    },
    // 其他文件编辑
    compileOtherFile(index, row) {
      // console.log(row[index]);
      // this.fileList = row[index].path;
      // this.fileList = this.otherFileList[index];
      this.updateoOtherVisible = true;
      this.form.ticketname = row[index].name;
      this.Serialno = row[index].Serialno;
    },

    // 点击其他文件弹框确认键
    updateOtherFile() {
      if (this.form.ticketname.trim() != 0) {
        if (this.fileList.length != 0) {
          let formData = new FormData();
          formData.append("file", this.fileList[0].raw);
          let url =
            this.base +
            `/api/filess/fileupdate?serialno=${this.Serialno}&newfilename=${this.form.ticketname}`;
          this.axios
            .post(url, formData, {
              "Content-Type": "multipart/form-data",
            })
            .then((res) => {
              if (res.data.code == 100) {
                this.getFilePath();
                this.$Message.success("文件上传成功");
                this.updateoOtherVisible = false;
                this.form.ticketname = "";
                this.fileList = [];
              }
            })
            .catch((err) => {
              this.$Message.error("上传失败");
              this.fileList = [];
            });
        } else {
          let url =
            this.base +
            `/api/filess/fileupdate?serialno=${this.Serialno}&newfilename=${this.form.ticketname}`;
          this.axios
            .post(
              url,
              { data: {} },
              {
                "Content-Type": "multipart/form-data",
              }
            )
            .then((res) => {
              if (res.data.code == 100) {
                this.getFilePath();
                this.$Message.success("修改成功");
                this.updateoOtherVisible = false;
                this.form.ticketname = "";
                this.fileList = [];
              }
            })
            .catch((err) => {
              this.$Message.error("上传失败");
              this.fileList = [];
            });
        }
      } else {
        this.$Message.error("请补充内容");
      }
    },
    // 其他文件，点击删除按钮，删除改信息
    async otherFileDel(index, row) {
      let data = await filedel(row[index].Serialno);
      if (data.msg == "ok") {
        this.$Message.success("删除成功");

        this.getFilePath();
      } else {
        this.$Message.error("删除失败");
      }
    },
    // 查看模块
    // 查看发票
    async checkInvoice(index, row) {
      let objectno = row[index].id;
      this.viewDetailsVisible = true;
      // 获取服务端数据
      let { data } = await getFilePath(objectno);
      if (data.length != 0) {
        const imgUrlStr = data[0].path;
        fetch(imgUrlStr).then((res) =>
          res.blob().then((blob) => {
            const a = document.createElement("a"), // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
              url = window.URL.createObjectURL(blob),
              filename = data[0].name;
            a.href = url;
            a.download = filename;
            a.click();
            window.URL.revokeObjectURL(url);
          })
        );
      } else {
        this.$message.warning("暂无资料，无法查看");
      }
    },
    // 查看合同信息
    async checkContract(index, row) {
      this.contractViewDetailsVisible = true;
      let objectno = row[index].id;
      let { data } = await getFilePath(objectno);
      if (data.length != 0) {
        const imgUrlStr = data[0].path;
        fetch(imgUrlStr).then((res) =>
          res.blob().then((blob) => {
            const a = document.createElement("a"), // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
              url = window.URL.createObjectURL(blob),
              filename = data[0].name;
            a.href = url;
            a.download = filename;
            a.click();
            window.URL.revokeObjectURL(url);
          })
        );
      } else {
        this.$message.warning("暂无资料，无法查看");
      }
    },
    // 查看申请信息
    async checkApply(index, row) {
      let data = await this.getFilePath();
      let applyCurrent = [];
      let applyPrior = [];
      for (let i = 0; i < data.length; i++) {
        // 当期年度报表
        if (
          (data[i].name == "当期年度报表") &
          (data[i].type == "apply") &
          (index == 0)
        ) {
          applyCurrent.push(data[i]);
          if (applyCurrent.length != 0) {
            const imgUrlStr = applyCurrent[0].path;
            fetch(imgUrlStr).then((res) =>
              res.blob().then((blob) => {
                const a = document.createElement("a"), // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
                  url = window.URL.createObjectURL(blob),
                  filename = applyCurrent[0].name;
                a.href = url;
                a.download = filename;
                a.click();
                window.URL.revokeObjectURL(url);
              })
            );
          } else {
            this.$message.warning("暂无资料，无法查看");
          }
        }
        // 上期年度报表
        if (
          (data[i].name == "上期年度报表") &
          (data[i].type == "apply") &
          (index == 1)
        ) {
          applyPrior.push(data[i]);
          if (applyPrior.length != 0) {
            const imgUrlStr = applyPrior[0].path;
            fetch(imgUrlStr).then((res) =>
              res.blob().then((blob) => {
                const a = document.createElement("a"), // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
                  url = window.URL.createObjectURL(blob),
                  filename = applyPrior[0].name;
                a.href = url;
                a.download = filename;
                a.click();
                window.URL.revokeObjectURL(url);
              })
            );
          } else {
            this.$message.warning("暂无资料，无法查看");
          }
        }
      }
    },
    // 判断用户上传的·是否为图片
    beforeAvatarUpload(file) {
      // console.log(file);
    },
    // 关闭弹窗
    handleClose() {
      this.applyFileVisible = false;
      this.newlyContractVisible = false;
      this.otherVisible = false;
      this.updateContractVisible = false;
      this.updateoOtherVisible = false;
      this.otherFileList = [];
      this.fileList = [];
    },
    // 表单格式转换
    // 票面金额
    limitInput(value, name) {
      this.inviteForm[name] =
        ("" + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || "";
    },
    //千分位格式化：10000转为10,000.00
    fmoney(s, n) {
      if (s == "" || s == null || (s == undefined) | isNaN(Number(s))) {
        return s;
      }
      s = Number(s) ? Number(s) : s;
      n = (n || n == 0) && n > -1 && n <= 20 ? n : 2;
      s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
      var l = s.split(".")[0].split("").reverse();
      var r = s.split(".")[1];
      var t = "";
      for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
      }
      if (n > 0) {
        r = "." + r;
      } else if (n == 0) {
        r = "";
      }
      let returnT = t.split("").reverse().join("") + r;
      //负数处理
      if (returnT[0] == "-" && returnT[1] == ",") {
        returnT = "-" + returnT.substring(2);
      }
      return returnT;
    },
    //千分位反格式化:10,000.00转为10000.00
    remoney(s) {
      let str = "";
      if (s) {
        str = String(s).replace(/,/g, "");
      }
      if (s && (s + "").indexOf(".") > -1 && Number(str)) {
        return String(s).replace(/[^\d\.-]/g, "");
      } else if (s && Number(str)) {
        return str;
      } else {
        return s;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.boxs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .f1 {
    margin-top: 0.1042rem;
    ul {
      display: flex;
      align-items: center;
      li {
        display: flex;
        flex-direction: column;
        height: 0.2083rem;
        .icon {
          .icon1 {
            width: 0.2083rem;
          }
          .icon2 {
            height: 0.0104rem;
            margin: 0 0.0833rem;
          }
        }
        span {
          font-size: 0.1042rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #999;
          margin-left: -0.1979rem;
          margin-top: 0.0156rem;
        }
      }
    }
  }
  .f2 {
    // height: 300rem;
    overflow: auto;
    box-sizing: border-box;
    padding: 0.0521rem 0.1302rem;
    width: 100%;
    margin-top: 0.1823rem;
    .null {
      display: flex;
      position: relative;
      flex-direction: column;
      align-items: center;
      .newly {
        display: flex;
        position: absolute;
        left: 0.0417rem;
        width: 0.7292rem;
        h4 {
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #808080;
          margin-right: 0.0417rem;
          cursor: pointer;
        }
        h5 {
          width: 0.2396rem;
          height: 0.1042rem;
          background: #3f6ef2;
          border-radius: 0.0104rem;
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          cursor: pointer;
        }
      }
      img {
        width: 1.1458rem;
      }
      p {
        font-size: 0.0729rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #b3b3b3;
      }
    }
    .notNull {
      width: 100%;
      // 新增按钮
      .newly {
        display: flex;
        width: 0.7292rem;
        margin: 0.1563rem 0.0052rem;
        h4 {
          font-size: 0.0833rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #808080;
          margin-right: 0.0417rem;
          cursor: pointer;
        }
        h5 {
          width: 0.2396rem;
          height: 0.1042rem;
          background: #3f6ef2;
          border-radius: 0.0104rem;
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          margin-left: 0.026rem;
          margin-top: 0.0052rem;
          cursor: pointer;
        }
      }
      // 说明文字
      .explain {
        display: flex;
        font-size: 0.0625rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #b1b1b1;
        margin: 0.1302rem 0;
        p {
          margin-bottom: 0.0313rem;
        }
      }
      // 表格编辑/查看
      .span {
        display: inline-block;
        width: 0.1563rem;
        height: 0.125rem;
        font-size: 0.0729rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #3f6ef2;
        border-bottom: 1px solid #3f6ef2;
        cursor: pointer;
        margin-right: 0.026rem;
      }
      .disable {
        color: #aaa;
        border-bottom: 1px solid #aaa;
      }
      // 删除按钮样式
      .del {
        font-size: 0.0729rem;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ff6060;
        border-bottom: 1px solid #ff6060;
      }
      // 服务协议
      .agreement {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 0.1302rem;
        text-align: center;
        margin-top: 0.2083rem;
        user-select: none;
        span {
          font-size: 0.0729rem;
          color: #666;
          margin-left: 0.0365rem;
        }
        img {
          width: 0.0781rem;
          height: 0.0781rem;
          cursor: pointer;
        }
        a {
          font-size: 0.0729rem;
          color: #3f6ef2;
        }
      }
      // 按钮组
      .submit {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 0.2604rem;
        margin: 0.4688rem 0 0.3125rem 0;

        .btn {
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 0.9375rem;
          height: 0.1979rem;
          background: linear-gradient(-90deg, #5d98f8, #4b5af8);
          box-shadow: 0px 0.0313rem 0.1042rem 0px rgba(0, 40, 193, 0.5);
          border-radius: 0.0208rem;
          font-size: 0.0938rem;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffffff;
          margin-right: 0.1563rem;
        }
        .btn1 {
          box-shadow: 0px 0 0 0px rgba(0, 40, 193, 0.5);
          background: #b6c9ff;
        }
        // 提交按钮
        .btn3 {
          background-color: #ccc;
          &.active {
            background-color: #3f6ef2;
          }
          &.actives {
            background-color: rgba(10, 123, 224, 0.6);
          }
        }
      }
    }
  }
  .f2::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    background-color: #fff;
  }

  .f2::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background: rgba(36, 143, 172, 0.5);
  }

  // 弹出框
  .dialog-center {
    display: flex;
    justify-content: center;
    // width: 90%;
    // margin: 0 auto;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-evenly;
    width: 70%;
    margin: 0 auto;
    z-index: 9999;
    .dialog-footer-bnt {
      width: 0.6302rem;
      height: 0.1615rem;
      color: #3f6ef2;
      border: 1px solid #3f6ef2;
      border-radius: 0.0208rem;
      background-color: #fff;
      z-index: 9999;
    }
    .btn2 {
      color: #fff;
      background-color: #3f6ef2;
      z-index: 9999;
      &.actives {
        background-color: rgba(10, 123, 224, 0.6);
        border: 0px;
      }
    }
  }
  .abc {
    width: 1.9167rem;
    .el-select {
      width: 100%;
    }
  }
  .el-form-item {
    margin-bottom: 0.1042rem;
    height: 0.2344rem;
    .file {
      font-size: 0.0833rem;
      margin-right: 0.0521rem;
      color: #3f6ef2;
      text-decoration: underline;
      cursor: pointer;
      z-index: 999999;
    }
    .file1 {
      color: #999;
    }
  }
}
::v-deep .el-dialog {
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 37%;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 35%;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 27%;
  }
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 1.6667rem;
  height: 0.2031rem;
  font-size: 0.0781rem;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 0.0521rem;
  color: #606266;
  outline: 0;
}
</style>
<style lang="scss">
//表格
.el-table {
  th.el-table__cell > .cell {
    font-size: 0.0833rem;
    font-weight: 400;
  }
  .cell {
    font-size: 0.0833rem;
  }
}

/* 邀请客户弹窗 */
.el-dialog--center .el-dialog__body {
  padding: 0.1042rem 0 0rem;
}
.el-form-item__label {
  padding-right: 0.0313rem !important;
  font-size: 0.0833rem;
}
.el-upload-list__item:first-child {
  margin-top: -0.0521rem;
}

.el-upload-list__item-name {
  margin-left: 0.0104rem !important;
  margin-top: -0.1667rem !important;
  z-index: 0;
}
.el-upload-list__item:first-child {
  width: 1.0938rem;
  margin-top: -0.0521rem;
  margin-left: 0.375rem;
}
</style>
